
<template>
    <div>
        <div class="clearfix">
            <Row>
                <Col span="11">
                    <div style="font-size:16px;font-weight:bold">apiRequest</div>
                    <highlightjs style="background-color: black;color:#fff" language='JSON' class="JSON" autodetect :code="apiRequestjsonStr" v-html="apiRequestjsonStr" />
                </Col>
                <Col span="11" class="pull-right" style="margin-left:35px">
                    <div style="font-size:16px;font-weight:bold">apiResponse</div>
                    <highlightjs style="background-color: black;color:#fff;overflow:auto" language='JSON' class="JSON" autodetect :code="apiResponsejsonStr" v-html="apiResponsejsonStr" />
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
export default {
    props:['apiRequest','apiResponse'],
    data(){
        return {
            apiRequestjsonStr:'',
            apiResponsejsonStr:'',
        }
    },
    created(){
        this.handleData()
    },
    methods:{
        handleData(){
            // var hljs = require('highlight.js');
            this.apiRequestjsonStr = global.hljs.highlightAuto(this.formatJson(JSON.parse(this.apiRequest))).value;
            this.apiResponsejsonStr = global.hljs.highlightAuto(this.formatJson(JSON.parse(this.apiResponse))).value;
        },
        formatJson(msg){
            var rep = "~";
            var jsonStr = JSON.stringify(msg, null, rep)
            var str = "";
            for (var i = 0; i < jsonStr.length; i++) {
                var text2 = jsonStr.charAt(i)
                if (i > 1) {
                    var text = jsonStr.charAt(i - 1)
                    if (rep != text && rep == text2) {
                        str += " "
                    }
                }
                str += text2;
            }
            jsonStr = "";
            for (var i = 0; i < str.length; i++) {
                var text = str.charAt(i);
                if (rep == text)
                    jsonStr += " "
                else {
                    jsonStr += text;
                }
                if (i == str.length - 2)
                    jsonStr += " "
            }
            return jsonStr;
        },

    }
}
</script>